import { useState } from 'react';
import { DatePicker, Cell, Picker, Button } from '@nutui/nutui-react-taro';
import { Right } from '@nutui/icons-react-taro';
import Taro from '@tarojs/taro';
import { getToken } from '../../utils';
import { Api } from '../../api'

const startDate = new Date(2023, 0, 1);
//  // 获取当前日期和时间
// const currentDateTime: Date = new Date();


//show1 和 show2 控制 DatePicker 组件的显示与隐藏。
//desc1 和 desc2 分别存储选择的开始时间和结束时间的描述。
export default function Vacate() {
  const [show1, setShow1] = useState(false); // 开始时间
  const [desc1, setDesc1] = useState(''); // 开始时间
  const [show2, setShow2] = useState(false); // 结束时间
  const [desc2, setDesc2] = useState(''); // 结束时间

//用于确认选择的日期时间，并将其格式化后存储到对应的 desc1 和 desc2 状态变量中。
  const confirm1 = (values: (string | number)[], options: any[]) => {
    const date = values.slice(0, 3).join('-');
    const time = values.slice(3).join(':');
    setDesc1(`${date} ${time}`);
  };

  const confirm2 = (values: (string | number)[], options: any[]) => {
    const date = values.slice(0, 3).join('-');
    const time = values.slice(3).join(':');
    setDesc2(`${date} ${time}`); 
  };


  const handleSubmit = () => {
    if (!desc1 || !desc2) {
      Taro.showToast({
        title: '请选择时间',
        icon: 'none',
        duration: 1500,
      });
      return;
    }

    const user: any = getToken();
    const params = {
      startDate: desc1,
      endDate: desc2,
      employeeId: user.id,
      employeeName: user.employeeName,
    };
   
    Api.postPunch(params).then((res: any) => {
      console.log(res.data);
      console.log(startDate);
      if (res.data) {
        Taro.showModal({
          title: '提示',
          content: '提交成功',
          showCancel: false,
          confirmText: '确定',
          success: (modalRes) => {
            if (modalRes.confirm) {
              Taro.navigateBack(); // 导航返回上一页
            }
          },
        });
      }
    });
   
  };

  return (
    <div className="flex flex-col justify-start items-center w-full h-full">
      <Cell
        title="开始时间"
        description={desc1}  //描述属性，使用 desc1 变量的值作为描述内容。
        extra={<Right size={16} />}
        onClick={() => setShow1(true)}
      />
      <DatePicker
        title="日期时间选择"
        startDate={startDate}
        visible={show1}
        type="datetime"
        onClose={() => setShow1(false)}
        onConfirm={(options, values) => confirm1(values, options)}
      />


      <Cell
        title="结束时间"
        description={desc2}
        extra={<Right size={16} />}
        onClick={() => setShow2(true)}
      />
      <DatePicker
        title="日期时间选择"
        startDate={startDate}
        visible={show2}
        type="datetime"
        onClose={() => setShow2(false)}
        onConfirm={(options, values) => confirm2(values, options)}
      />
     
      <div className="flex-1 w-full pb-20 flex flex-col justify-end items-center">
        <Button type="primary" className="w-2/4" onClick={handleSubmit}>
          提交
        </Button>
      </div>
    </div>
  );
}
